<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 300px;
        height: 300px;
        background-color: red;
    }
    /* 手机 */
    @media  screen and (max-width:768px){
        .box{
            background-color: blue;
        }
        .p1{
            display: none;
        }
        .p2{
            display: none;
        }
    }
    /* 平板 */
    @media  screen and (min-width:768px) and (max-width:996px){
        .box{
            background-color: rgb(39, 143, 208);
        }
        .p1{
            display: none;
        }
        .p2{
            display: block;
        }
    }
    /* 电脑 */
    @media  screen and (min-width:996px){
        .box{
            background-color: rgb(202, 34, 84);
        }
    }
</style>
<body>
    <!-- 媒体查询
       媒体查询能使页面在不同在终端设备下达到不同的效果
       媒体查询会根据设备的大小自定识别加载不同的样式
    -->

    <div class="box"></div>
    <p class="p1">哈哈哈</p>
    <p class="p2">呵呵呵</p>
</body>
</html>